<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>订单管理</el-breadcrumb-item>
      <el-breadcrumb-item>订单列表</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input placeholder="请输订单编号" clearable @clear="search" v-model="orderNum" >
            <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
          </el-input>
        </el-col>
      </el-row>
    </el-card>

    <el-table :data="orderList" border stripe>
      <el-table-column label="#" type="index"></el-table-column>
      <el-table-column label="订单编号" prop="orderNum"></el-table-column>
      <el-table-column label="下单人" prop="username"></el-table-column>
      <el-table-column label="总价格" prop="totalprice"></el-table-column>
      <el-table-column label="下单时间" prop="createtime"></el-table-column>

      <el-table-column label="订单状态">
        <template slot-scope="sc">
          <span v-if="sc.row.state == 1">未支付</span>
          <span v-if="sc.row.state == 2">已支付</span>
          <span v-if="sc.row.state == 3">退款中</span>
          <span v-if="sc.row.state == 4">已退款</span>
          <span v-if="sc.row.state == 5">已取消</span>
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="warning" size="mini" v-if="scope.row.state == 2">发货</el-button>
          <el-button type="danger" size="mini" v-if="scope.row.state == 3">同意退款</el-button>
          <el-button type="danger" size="mini" v-if="scope.row.state == 3">拒绝退款</el-button>
        </template>
      </el-table-column>
    </el-table>


  </div>
</template>

<script>
export default {
  name: "Order",
  data(){
    return {
      orderNum:'',
      orderList:[]
    }
  },
  methods:{
    search(){

    },
    searchOrder(){
      this.$axios.get("order/list",{
        params:{
          orderNum:this.orderNum
        }
      }).then((data)=>{
        if (data.data.code == 200){
            this.orderList = data.data.data.records ;
        }
      })
    }
  },
  created() {
    this.searchOrder();
  }
}
</script>

<style scoped>

</style>